<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件</title>
    <!-- <script src="https://unpkg.com/vconsole@3.15.1/dist/vconsole.min.js"></script> -->

    <script src="./html5-qrcode.min.js"></script>
    <script src="./quagga.min.js"></script>
    <style>
      video {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- <a href="./file/meseequick-tv.apk" download="./file/meseequick-tv.apk">
      下载文件
    </a> -->
    <div>
      <button id="start">点击开始</button>
      <button id="stop" onclick="stop()">停止</button>
      <div></div>
      <!-- <button id="pai">拍照</button> -->
    </div>
    <!-- <img
      id="photo"
      style="
        max-width: 500px;
        border: 1px solid red;
        min-height: 200px;
        min-width: 300px;
      "
      alt=""
    /> -->
    <br />
    <video id="video"></video>
    <video id="live" src=""></video>
    <canvas
      id="canvas"
      style="border: 1px solid yellow"
      width="500"
      height="500"
    ></canvas>

    <br />
    <!-- <a href="./timeline.json" download="./timeline.json">下载</a> -->

    <script>
      // const vConsole = new VConsole();
      const canvas = document.getElementById("canvas");
      const video = document.getElementById("video");
      const pai = document.getElementById("pai");
      const photo = document.getElementById("photo");
      const start = document.getElementById("start");

      // Quagga.decodeSingle(config, function (result) {
      //   //识别结果
      //   console.log(result);
      //   if (result.codeResult) {
      //   } else {
      //     alert("未识别到图片中的条形码！");
      //   }
      // });

      Quagga.onProcessed((result) => {
        console.log(result);
        if (result && result.codeResult) {
          // console.log(result.codeResult);
          console.log(result.codeResult.code);
        }
      });
      function stop() {
        Quagga.stop();
        video.src = null;
      }
      function invokingCarera() {
        window.navigator.getUserMedia =
          navigator.getUserMedia ||
          navigator.webKitGetUserMedia ||
          navigator.mozGetUserMedia ||
          navigator.msGetUserMedia;
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices
            .getUserMedia({
              // audio: true,
              video: true, //true//
            })
            .then(function (mediaStream) {
              // console.log(mediaStream);
              video.srcObject = mediaStream;
              video.play();
            })
            .catch(function (error) {
              console.log(error);
            });
        } else if (navigator.getUserMedia) {
          navigator.getUserMedia(
            {
              video: true,
              audio: true,
            },
            () => {},
            () => {}
          );
        } else {
          alert("不支持摄像头调用！");
        }
      }

      start.onclick = () => {
        // invokingCarera();
        // Quagga.init(
        //   {
        //     inputStream: {
        //       name: "Live",
        //       type: "LiveStream",
        //       target: video,
        //     },
        //     locator: {
        //       patchSize: "medium",
        //       halfSample: false,
        //     },
        //     decoder: {
        //       readers: ["code_128_reader", "code_39_reader", "code_93_reader"],
        //     },
        //     area: {
        //       // defines rectangle of the detection/localization area
        //       top: "0%", // top offset
        //       right: "0%", // right offset
        //       left: "0%", // left offset
        //       bottom: "0%", // bottom offset
        //     },
        //   },
        //   function (err) {
        //     if (err) {
        //       console.log(err);
        //       return;
        //     }
        //     Quagga.start();
        //   }
        // );

        // return;

        let inputFile = document.createElement("input");
        inputFile.type = "file";
        inputFile.accept = "image/png,image/jpeg";
        inputFile.click();

        inputFile.onchange = (event) => {
          console.log(event.target.files);
          let file = event.target.files[0];
          console.log(file);

          let url = window.URL.createObjectURL(file);
          // photo.src = url;
          // const image = new Image();
          // image.src = url;

          let reader = new FileReader();
          reader.onload = () => {
            console.log(reader.result);
            let data = reader.result;

            Quagga.decodeSingle(
              {
                // inputStream: {
                //   size: 800,
                //   singleChannel: false,
                // },
                locator: {
                  patchSize: "medium",
                  halfSample: true,
                },
                decoder: {
                  readers: [
                    "code_128_reader",
                    "code_39_reader",
                    "code_93_reader",
                  ],
                },

                src: data,
              },
              (result) => {
                console.log(result);
                if (result?.codeResult) {
                  console.log(result.codeResult.code);
                } else {
                  console.log("not found");
                }
              }
            );
          };
          // reader.readAsArrayBuffer(file);
          reader.readAsDataURL(file);

          // const context = canvas.getContext("2d");
          // context.clearRect(0, 0, imgWidth, imgHeight);
          // context.drawImage(image, 0, 0, imgWidth, imgHeight);
          // const imgData = context.getImageData(0, 0, imgWidth, imgHeight);
        };
      };

      function startVideo() {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          // 获取摄像头模式，默认设置是后置摄像头

          // 摄像头视频处理
          // 捕获视频流
          navigator.mediaDevices
            .getUserMedia({ video: true, audio: false })
            .then((stream) => {
              console.log(stream);
              video.srcObject = stream;
              video.play();
            })
            .catch((e) => {
              console.log(e);
            });
        } else {
        }
      }

      // pai.onclick = () => {
      //   const context = canvas.getContext("2d");
      //   context.drawImage(video, 0, 0, 500, 500);
      //   const data = canvas.toDataURL("image/png");
      //   console.log(data);
      //   photo.setAttribute("src", data);
      // };
    </script>
    
  </body>
</html>
